<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="Brennan Wu">
    
    <title>
        
            Nuxt爬坑 |
        
        Brennan&#39;s Blog
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en","path":"search.json"};
    KEEP.theme_config = {"toc":{"enable":true,"number":false,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/logo.svg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"All the way adhere to the people,and the mountains are the most beautiful scenery","description2":"一路坚持的人，都和山色一样是最美的景"},"scroll":{"progress_bar":{"enable":true},"percent":{"enable":false}}},"local_search":{"enable":true,"preload":false},"code_copy":{"enable":true,"style":"mac"},"pjax":{"enable":false},"lazyload":{"enable":true},"version":"3.4.3"};
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    
        <span class="scroll-progress-bar"></span>
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Brennan&#39;s Blog
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">Nuxt爬坑</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Brennan Wu</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;2021-10-24 17:55:13
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Nuxt/">Nuxt</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E7%88%AC%E5%9D%91/">爬坑</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="第一节：nuxt-js相关概述"><a href="#第一节：nuxt-js相关概述" class="headerlink" title="第一节：nuxt.js相关概述"></a>第一节：nuxt.js相关概述</h2><blockquote>
<p>nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）.Vue.js是开发SPA（单页应用）的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态html。</p>
</blockquote>
<h3 id="1-那服务器端渲染到底有什么好处呢？"><a href="#1-那服务器端渲染到底有什么好处呢？" class="headerlink" title="1.那服务器端渲染到底有什么好处呢？"></a>1.那服务器端渲染到底有什么好处呢？</h3><blockquote>
<p>主要的原因时SPA（单页应用）不利于搜索引擎的SEO操作，Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目，就没必要使用这个框架了。</p>
</blockquote>
<h3 id="2-什么是SSR？"><a href="#2-什么是SSR？" class="headerlink" title="2.什么是SSR？"></a>2.什么是SSR？</h3><blockquote>
<p> 在认识SSR之前，首先对CSR与SSR之间做个对比。</p>
<p>首先看一下传统的web开发，传统的web开发是，客户端向服务端发送请求，服务端查询数据库，拼接HTML字符串（模板），通过一系列的数据处理之后，把整理好的HTML返回给客户端,浏览器相当于打开了一个页面。这种比如我们经常听说过的jsp,PHP,aspx也就是传统的MVC的开发。</p>
<p>SPA应用，到了Vue、React，单页面应用优秀的用户体验，逐渐成为了主流，页面整体式javaScript渲染出来的，称之为客户端渲染CSR。SPA渲染过程。由客户端访问URL发送请求到服务端，返回HTML结构（但是SPA的返回的HTML结构是非常的小的，只有一个基本的结构，如第一段代码所示）。客户端接收到返回结果之后，在客户端开始渲染HTML，渲染时执行对应javaScript，最后渲染template，渲染完成之后，再次向服务端发送数据请求，注意这里时数据请求，服务端返回json格式数据。客户端接收数据，然后完成最终渲染。</p>
<p>SPA虽然给服务器减轻了压力，但是也是有缺点的：<br>1.首屏渲染时间比较长：必须等待JavaScript加载完毕，并且执行完毕，才能渲染出首屏。<br>2.SEO不友好：爬虫只能拿到一个div元素，认为页面是空的，不利于SEO。</p>
<p>为了解决如上两个问题，出现了SSR解决方案，后端渲染出首屏的DOM结构返回，前端拿到内容带上首屏，后续的页面操作，再用单页面路由和渲染，称之为服务端渲染(SSR)。</p>
<p>SSR渲染流程是这样的，客户端发送URL请求到服务端，服务端读取对应的url的模板信息，在服务端做出html和数据的渲染，渲染完成之后返回html结构，客户端这时拿到的之后首屏页面的html结构。所以用户在浏览首屏的时候速度会很快，因为客户端不需要再次发送ajax请求。并不是做了SSR我们的页面就不属于SPA应用了，它仍然是一个独立的spa应用。</p>
<p>SSR是处于CSR与SPA应用之间的一个折中的方案，在渲染首屏的时候在服务端做出了渲染，注意仅仅是首屏，其他页面还是需要在客户端渲染的，在服务端接收到请求之后并且渲染出首屏页面，会携带着剩余的路由信息预留给客户端去渲染其他路由的页面。</p>
<p>Nuxt.js特点（优点）：</p>
<ul>
<li>基于Vue</li>
<li>自动代码分层</li>
<li>服务端渲染</li>
<li>强大的路由功能，支持异步数据</li>
<li>静态文件服务</li>
<li>EcmaScript6和EcmaScript7的语法支持</li>
<li>打包和压缩JavaScript和Css</li>
<li>HTML头部标签管理</li>
<li>本地开发支持热加载</li>
<li>集成ESLint</li>
<li>支持各种样式预编译器SASS、LESS等等</li>
<li>支持HTTP/2推送</li>
</ul>
</blockquote>
<h2 id="第二节：Nuxt环境搭建"><a href="#第二节：Nuxt环境搭建" class="headerlink" title="第二节：Nuxt环境搭建"></a>第二节：Nuxt环境搭建</h2><blockquote>
<p>1.nuxt.js安装</p>
<p>安装流程参考 <a class="link"   target="_blank" rel="noopener" href="https://www.nuxtjs.cn/guide/installation" >官方<i class="fas fa-external-link-alt"></i></a></p>
<p>2.Nuxt 渲染流程</p>
</blockquote>
<img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/2021/10/24/nuxt-note1/20210416164751.png"
                      class=""
                >

<blockquote>
<p>通过上面的流程图可以看出，当一个客户端请求进入的时候，服务端有通过nuxtServerInit这个命令执行在Store的action中，在这里接收到客户端请求的时候，可以将一些客户端信息存储到Store中，也就是说可以把在服务端存储的一些客户端的一些登录信息存储到Store中。之后使用了中间件机制，中间件其实就是一个函数，会在每个路由执行之前去执行，在这里可以做很多事情，或者说可以理解为是路由器的拦截器的作用。然后再validate执行的时候对客户端携带的参数进行校验，在asyncData与fetch进入正式的渲染周期，asyncData向服务端获取数据，把请求到的数据合并到Vue中的data中。</p>
</blockquote>
<h2 id="第三节：Nuxt目录结构"><a href="#第三节：Nuxt目录结构" class="headerlink" title="第三节：Nuxt目录结构"></a>第三节：Nuxt目录结构</h2><h3 id="目录结构介绍"><a href="#目录结构介绍" class="headerlink" title="目录结构介绍"></a>目录结构介绍</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">└─my-nuxt-demo</span><br><span class="line">  ├─.nuxt               // Nuxt自动生成，临时的用于编辑的文件，build</span><br><span class="line">  ├─assets              // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中</span><br><span class="line">  ├─components          // 用于自己编写的Vue组件，比如日历组件、分页组件</span><br><span class="line">  ├─layouts             // 布局目录，用于组织应用的布局组件，不可更改⭐</span><br><span class="line">  ├─middleware          // 用于存放中间件</span><br><span class="line">  ├─node_modules</span><br><span class="line">  ├─pages               // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，文件名不可更改⭐</span><br><span class="line">  ├─plugins             // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。</span><br><span class="line">  ├─static              // 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。⭐</span><br><span class="line">  └─store               // 用于组织应用的Vuex 状态管理。文件夹名不可更改。⭐</span><br><span class="line">  ├─.editorconfig       // 开发工具格式配置</span><br><span class="line">  ├─.eslintrc.js        // ESLint的配置文件，用于检查代码格式</span><br><span class="line">  ├─.gitignore          // 配置git忽略文件</span><br><span class="line">  ├─nuxt.config.js      // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。⭐</span><br><span class="line">  ├─package-lock.json   // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作</span><br><span class="line">  ├─package.json        // npm 包管理配置文件</span><br><span class="line">  ├─README.md</span><br></pre></td></tr></table></figure>

<h3 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;universal&#x27;</span>,  <span class="comment">//  当前渲染使用模式</span></span><br><span class="line">  <span class="comment">/*</span></span><br><span class="line"><span class="comment">  ** Headers of the page</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line">  <span class="attr">head</span>: &#123;  <span class="comment">//  页面head配置信息</span></span><br><span class="line">    <span class="attr">title</span>: process.env.npm_package_name || <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="attr">meta</span>: [</span><br><span class="line">      &#123; <span class="attr">charset</span>: <span class="string">&#x27;utf-8&#x27;</span> &#125;,</span><br><span class="line">      &#123; <span class="attr">name</span>: <span class="string">&#x27;viewport&#x27;</span>, <span class="attr">content</span>: <span class="string">&#x27;width=device-width, initial-scale=1&#x27;</span> &#125;,</span><br><span class="line">      &#123; <span class="attr">hid</span>: <span class="string">&#x27;description&#x27;</span>, <span class="attr">name</span>: <span class="string">&#x27;description&#x27;</span>, <span class="attr">content</span>: process.env.npm_package_description || <span class="string">&#x27;&#x27;</span> &#125;</span><br><span class="line">    ],</span><br><span class="line">    <span class="attr">link</span>: [  <span class="comment">//  favicon，若引用css不会进行打包处理</span></span><br><span class="line">      &#123; <span class="attr">rel</span>: <span class="string">&#x27;icon&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;image/x-icon&#x27;</span>, <span class="attr">href</span>: <span class="string">&#x27;/favicon.ico&#x27;</span> &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">/*</span></span><br><span class="line"><span class="comment">  ** Customize the progress-bar color</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line">  <span class="attr">loading</span>: &#123; <span class="attr">color</span>: <span class="string">&#x27;#fff&#x27;</span> &#125;,  <span class="comment">//  页面进度条</span></span><br><span class="line">  <span class="comment">/*</span></span><br><span class="line"><span class="comment">  ** Global CSS</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line">  <span class="attr">css</span>: [  <span class="comment">//  全局css（会进行webpack打包处理）</span></span><br><span class="line">    <span class="string">&#x27;iview/dist/styles/iview.css&#x27;</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">/*</span></span><br><span class="line"><span class="comment">  ** Plugins to load before mounting the App</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line">  <span class="attr">plugins</span>: [   <span class="comment">//  插件</span></span><br><span class="line">    <span class="string">&#x27;@/plugins/iview&#x27;</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">/*</span></span><br><span class="line"><span class="comment">  ** Nuxt.js dev-modules</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line">  <span class="attr">buildModules</span>: [</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">/*</span></span><br><span class="line"><span class="comment">  ** Nuxt.js modules</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line">  <span class="attr">modules</span>: [  <span class="comment">//  模块</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">/*</span></span><br><span class="line"><span class="comment">  ** Build configuration</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line">  <span class="attr">build</span>: &#123;   <span class="comment">//  打包</span></span><br><span class="line">    <span class="comment">/*  </span></span><br><span class="line"><span class="comment">    ** You can extend webpack config here</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">    extend (config, ctx) &#123;   <span class="comment">//  webpack自定义配置</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="Nuxt运行命令"><a href="#Nuxt运行命令" class="headerlink" title="Nuxt运行命令"></a>Nuxt运行命令</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">  <span class="string">&quot;dev&quot;</span>: <span class="string">&quot;nuxt&quot;</span>,  <span class="comment">//  开发环境</span></span><br><span class="line">  <span class="string">&quot;build&quot;</span>: <span class="string">&quot;nuxt build&quot;</span>,  <span class="comment">//  打包</span></span><br><span class="line">  <span class="string">&quot;start&quot;</span>: <span class="string">&quot;nuxt start&quot;</span>,  <span class="comment">//  在服务端运行</span></span><br><span class="line">  <span class="string">&quot;generate&quot;</span>: <span class="string">&quot;nuxt generate&quot;</span>  <span class="comment">//  生成静态页面</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="第四节：Nuxt常用配置项"><a href="#第四节：Nuxt常用配置项" class="headerlink" title="第四节：Nuxt常用配置项"></a>第四节：Nuxt常用配置项</h2><h3 id="1-配置IP和端口"><a href="#1-配置IP和端口" class="headerlink" title="1.配置IP和端口"></a>1.配置IP和端口</h3><blockquote>
<p>开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置1000。</p>
<p>/package.json</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;config&quot;</span>:&#123;</span><br><span class="line">  <span class="string">&quot;nuxt&quot;</span>:&#123;</span><br><span class="line">    <span class="string">&quot;host&quot;</span>:<span class="string">&quot;127.0.0.1&quot;</span>,</span><br><span class="line">    <span class="string">&quot;port&quot;</span>:<span class="string">&quot;1000&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>配置好后，我们在终端中输入npm run dev，然后你会看到服务地址改为了127.0.0.1:1000</p>
</blockquote>
<h3 id="2-配置全局CSS"><a href="#2-配置全局CSS" class="headerlink" title="2.配置全局CSS"></a>2.配置全局CSS</h3><blockquote>
<p>在开发多页项目时，都会定义一个全局的CSS来初始化我们的页面渲染，比如把padding和margin设置成0，网上也有非常出名的开源css文件normailze.css。要定义这些配置，需要在nuxt.config.js里进行操作。</p>
<p>比如现在我们要把页面字体设置为红色，就可以在assets/css/common.css文件，然后把字体设置为红色。</p>
<p>/assets/css/common.css</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>/nuxt.config.js</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">css:[<span class="string">&#x27;~assets/css/normailze.css&#x27;</span>],</span><br></pre></td></tr></table></figure>

<h3 id="3-配置webpack的loader"><a href="#3-配置webpack的loader" class="headerlink" title="3.配置webpack的loader"></a>3.配置webpack的loader</h3><blockquote>
<p>在nuxt.config.js里是可以对webpack的基本配置进行覆盖的，比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置,相关可参照此 <a class="link"   target="_blank" rel="noopener" href="https://www.cnblogs.com/ssh-007/p/7867954.html" >链接<i class="fas fa-external-link-alt"></i></a></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">** 配置webpack的loader</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="attr">loaders</span>: &#123;</span><br><span class="line">  <span class="attr">imgUrl</span>: &#123; <span class="attr">limit</span>: <span class="number">10000</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="第五节：Nuxt的路由配置和参数传递"><a href="#第五节：Nuxt的路由配置和参数传递" class="headerlink" title="第五节：Nuxt的路由配置和参数传递"></a>第五节：Nuxt的路由配置和参数传递</h2><blockquote>
<p>Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。</p>
</blockquote>
<h3 id="1-基本路由"><a href="#1-基本路由" class="headerlink" title="1.基本路由"></a>1.基本路由</h3><blockquote>
<p>Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。</p>
<p>假设 pages 的目录结构如下</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">└─pages</span><br><span class="line">    ├─index.vue</span><br><span class="line">    └─user</span><br><span class="line">      ├─index.vue</span><br><span class="line">      ├─one.vue</span><br></pre></td></tr></table></figure>
<blockquote>
<p>那么，Nuxt.js 自动生成的路由配置如下：</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">router: &#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;index&#x27;</span>,</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="string">&#x27;pages/index.vue&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;user&#x27;</span>,</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/user&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="string">&#x27;pages/user/index.vue&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;user-one&#x27;</span>,</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/user/one&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="string">&#x27;pages/user/one.vue&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-页面跳转"><a href="#2-页面跳转" class="headerlink" title="2.页面跳转"></a>2.页面跳转</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 不要写成a标签，因为是重新获取一个新的页面，并不是SPA</span><br><span class="line"></span><br><span class="line"><span class="number">2.</span> &lt;nuxt-link to=<span class="string">&quot;/users&quot;</span>&gt;&lt;/nuxt-link&gt;</span><br><span class="line"></span><br><span class="line"><span class="number">3.</span> <span class="built_in">this</span>.$router.push(<span class="string">&#x27;/users&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h3 id="3-动态路由"><a href="#3-动态路由" class="headerlink" title="3.动态路由"></a>3.动态路由</h3><ul>
<li>在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。</li>
<li>获取动态参数</li>
</ul>
<h3 id="4-跳转路由传递参数并且取值"><a href="#4-跳转路由传递参数并且取值" class="headerlink" title="4.跳转路由传递参数并且取值"></a>4.跳转路由传递参数并且取值</h3><blockquote>
<p>路由经常需要传递参数，我们可以简单的使用params来进行传递参数，我们现在向新闻页面（news）传递个参数，然后在新闻页面进行简单的接收。</p>
<p>（1）使用nuxt传递参数</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">nuxt-link</span> <span class="attr">:to</span>=<span class="string">&quot;`informa/$&#123;item.newsCode&#125;-$&#123;item.newsType&#125;`&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">nuxt-link</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意：name其实指向的是路由（文件夹或文件名），而路由死活区分大小写的 ， 所以to后面区分大小写！！！建议文件夹都写成小写的。</p>
</blockquote>
<img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/2021/10/24/nuxt-note1/20210420100155.png"
                      class=""
                >

<blockquote>
<p>（2）使用nuxt接收参数</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="title">asyncData</span>(<span class="params">context</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> newsCode = context.route.params.code.split(<span class="string">&#x27;-&#x27;</span>)[<span class="number">0</span>]</span><br><span class="line">    <span class="keyword">let</span> newsType = context.route.params.code.split(<span class="string">&#x27;-&#x27;</span>)[<span class="number">1</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>（3）使用this.$router.push的query传递参数</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 传递参数</span></span><br><span class="line"><span class="built_in">this</span>.$router.push(&#123;<span class="attr">path</span>: <span class="string">&#x27; 路由 &#x27;</span>, <span class="attr">query</span>: &#123;<span class="attr">key</span>: value&#125;&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 参数取值</span></span><br><span class="line"><span class="built_in">this</span>.$route.query.key</span><br><span class="line"><span class="comment">// 注: 使用这种方式，传递参数会拼接在路由后面，出现在地址栏</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>（4）使用this.$router.push的params传递参数</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 传递参数</span></span><br><span class="line"><span class="built_in">this</span>.$router.push(&#123;<span class="attr">name</span>: <span class="string">&#x27; 路由的name &#x27;</span>, <span class="attr">params</span>: &#123;<span class="attr">key</span>: value&#125;&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 参数取值</span></span><br><span class="line"><span class="built_in">this</span>.$route.params.key</span><br><span class="line"><span class="comment">// 注: 使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数</span></span><br><span class="line"><span class="comment">// 注意: 由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。</span></span><br></pre></td></tr></table></figure>

<h3 id="5-项目需求url优化"><a href="#5-项目需求url优化" class="headerlink" title="5.项目需求url优化"></a>5.项目需求url优化</h3><blockquote>
<p>this.$route.query.key的方式参数显示在地址栏上, 但是并不是我们想要的, :id?id=``?</p>
<p>所以建议还是尽量使用router-link来实现跳转来解决地址栏的变化,更方便网站的优化</p>
</blockquote>
<h3 id="6-路由参数校验"><a href="#6-路由参数校验" class="headerlink" title="6.路由参数校验"></a>6.路由参数校验</h3><blockquote>
<p>Nuxt.js 可以让你在动态路由对应的页面组件中配置一个validate方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// nuxt中使用validate方法进行路由参数校验，这个方法必须返回一个布尔值，为true表示校验通过，为false表示校验失败。注意validate不能写到methods属性中。</span></span><br><span class="line">  <span class="function"><span class="title">validate</span>(<span class="params">obj</span>)</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(obj);</span></span><br><span class="line">    <span class="comment">// return true</span></span><br><span class="line">    <span class="keyword">return</span> <span class="regexp">/^\d+$/</span>.test(obj.params.id)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="7-嵌套路由"><a href="#7-嵌套路由" class="headerlink" title="7.嵌套路由"></a>7.嵌套路由</h3><ol>
<li>添加一个Vue文件，作为父组件</li>
<li>添加一个与父组件同名的文件夹来存放子视图组件</li>
<li>在父文件中，添加组件，用于展示匹配到的子视图</li>
</ol>
<blockquote>
<p>假设文件结构如：</p>
</blockquote>
<img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/2021/10/24/nuxt-note1/20210420105106.png"
                      class=""
                >

<blockquote>
<p>Nuxt.js 自动生成的路由配置如下：</p>
</blockquote>
<img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/2021/10/24/nuxt-note1/20210420105134.png"
                      class=""
                >

<h2 id="第六节：Nuxt的路由动画效果"><a href="#第六节：Nuxt的路由动画效果" class="headerlink" title="第六节：Nuxt的路由动画效果"></a>第六节：Nuxt的路由动画效果</h2><blockquote>
<p>路由的动画效果，也叫作页面的更换效果。Nuxt.js提供两种方法为路由提供动画效果，一种是全局的，一种是针对单独页面制作。</p>
</blockquote>
<h3 id="1-全局路由动画"><a href="#1-全局路由动画" class="headerlink" title="1.全局路由动画"></a>1.全局路由动画</h3><blockquote>
<p>全局动画默认使用page来进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个common.css文件。</p>
</blockquote>
<blockquote>
<p>（1）添加样式文件</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.page-enter-active</span>,</span><br><span class="line"><span class="selector-class">.page-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">0.1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.page-enter</span>,</span><br><span class="line"><span class="selector-class">.page-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>（2）文件配置</p>
<p>然后在nuxt.config.js里加入一个全局的css文件就可以了。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">css:[<span class="string">&#x27;assets/css/common.css&#x27;</span>],</span><br></pre></td></tr></table></figure>

<blockquote>
<p>这时候在页面切换的时候就会有2秒钟的动画切换效果了，但是你会发现一些页面是没有效果的，这是因为你没有是&lt;nuxt-link&gt;组件来制作跳转链接。你需要进行更改。</p>
<p>比如我们上节课作的动态路由新闻页，你就需要改成下面的链接。</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">nuxt-link</span> <span class="attr">:to</span>=<span class="string">&quot;&#123;name:&#x27;news-id&#x27;,params:&#123;id:123&#125;&#125;&quot;</span>&gt;</span>News-1<span class="tag">&lt;/<span class="name">nuxt-link</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-单独设置页面动效"><a href="#2-单独设置页面动效" class="headerlink" title="2.单独设置页面动效"></a>2.单独设置页面动效</h3><blockquote>
<p>想给一个页面单独设置特殊的效果时，我们只要在css里改变默认的page，然后在页面组件的配置中加入transition字段即可。例如，我们想给about页面加入一个字体放大然后缩小的效果，其他页面没有这个效果。</p>
<p>（1）在全局样式assets/main.css 中添加以下内容</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.test-enter-active</span>, <span class="selector-class">.test-leave-active</span> &#123;</span><br><span class="line">    <span class="attribute">transition</span>: all <span class="number">2s</span>;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">12px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.test-enter</span>, <span class="selector-class">.test-leave-active</span> &#123;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">40px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>（2）然后在about/index.vue组件中设置</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">export default &#123;</span><br><span class="line">  <span class="attribute">transition</span>:<span class="string">&#x27;test&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>这时候就有了页面的切换独特动效了。</p>
<p>总结：在需要使用的页面导入即可。</p>
</blockquote>
<h2 id="第七节：Nuxt的默认模版和默认布局"><a href="#第七节：Nuxt的默认模版和默认布局" class="headerlink" title="第七节：Nuxt的默认模版和默认布局"></a>第七节：Nuxt的默认模版和默认布局</h2><blockquote>
<p>在开发应用时，经常会用到一些公用的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模版。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模版比较方便，但是只能每个页面都引入。</p>
</blockquote>
<h3 id="1-默认模板"><a href="#1-默认模板" class="headerlink" title="1.默认模板"></a>1.默认模板</h3><blockquote>
<p>Nuxt为我们提供了超简单的默认模版订制方法，只要在根目录下创建一个app.html就可以实现了。现在我们希望每个页面的最上边都加入“ 学习nuxt.js” 这几个字，我们就可以使用默认模版来完成。</p>
<p>app.html中：</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">   &#123;&#123; HEAD &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>学习nuxt.js<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    &#123;&#123; APP &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>这里的读取的是nuxt.config.js里的信息， 就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写，如果小写会报错的。</p>
<p>注意：如果你建立了默认模板后，记得要重启服务器，否则显示不会成功；但是默认布局是不用重启服务器的。</p>
</blockquote>
<h3 id="2-默认布局"><a href="#2-默认布局" class="headerlink" title="2.默认布局"></a>2.默认布局</h3><blockquote>
<p>默认模板类似的功能还有默认布局，但是从名字上你就可以看出来，默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息，只是关于&lt;template&gt;标签下的内容统一订制。</p>
<p>需求：我们在每个页面的最顶部放入“学习nuxt.js” 这几个字，看一下在默认布局里的实现。</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>学习nuxt.js<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">nuxt</span>/&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>这里的&lt;nuxt/&gt;就相当于我们每个页面的内容，你也可以把一些通用样式放入这个默认布局里，但会增加页面的复杂程度。</p>
</blockquote>
<blockquote>
<p>总结：要区分默认模版和默认布局的区别，模版可以订制很多头部信息，包括IE版本的判断；布局只能定制&lt;template&gt;里的内容，跟布局有关系。在工作中修改时要看情况来编写代码。</p>
</blockquote>
<h2 id="第八节：Nuxt插件的使用"><a href="#第八节：Nuxt插件的使用" class="headerlink" title="第八节：Nuxt插件的使用"></a>第八节：Nuxt插件的使用</h2><h3 id="1-iview使用"><a href="#1-iview使用" class="headerlink" title="1.iview使用"></a>1.iview使用</h3><ol>
<li><p>下载npm i element-ui -S</p>
</li>
<li><p>在plugins文件夹下面，创建ElementUI.js文件</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> iView <span class="keyword">from</span> <span class="string">&#x27;iview&#x27;</span></span><br><span class="line"><span class="keyword">import</span> locale <span class="keyword">from</span> <span class="string">&#x27;iview/dist/locale/zh-CN&#x27;</span></span><br><span class="line"></span><br><span class="line">Vue.use(iView, &#123;</span><br><span class="line">  locale</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>在nuxt.config.js中添加配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">css: [</span><br><span class="line">  <span class="string">&#x27;iview/dist/styles/iview.css&#x27;</span></span><br><span class="line">],</span><br><span class="line"><span class="attr">plugins</span>: [</span><br><span class="line">  <span class="string">&#x27;@/plugins/iview&#x27;</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<h3 id="2-mockjs使用"><a href="#2-mockjs使用" class="headerlink" title="2.mockjs使用"></a>2.mockjs使用</h3><ol>
<li>安装依赖：</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install mockjs --save-dev</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>配置插件</li>
</ol>
<blockquote>
<p> 在 plugins/mock.js 建立一个 mock 的插件，我们就在这里模拟数据：</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入mockjs</span></span><br><span class="line"><span class="keyword">const</span> Mock = <span class="built_in">require</span>(<span class="string">&#x27;mockjs&#x27;</span>)</span><br><span class="line"><span class="comment">// 获取 mock.Random 对象</span></span><br><span class="line"><span class="keyword">const</span> Random = Mock.Random;</span><br><span class="line"><span class="comment">//使用mockjs模拟数据</span></span><br><span class="line">Mock.mock(<span class="string">&#x27;/api/data&#x27;</span>, <span class="function">(<span class="params">req, res</span>) =&gt;</span> &#123;<span class="comment">//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据</span></span><br><span class="line">    <span class="keyword">let</span> list = [];</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">30</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">let</span> listObject = &#123;</span><br><span class="line">            <span class="attr">title</span>: Random.csentence(<span class="number">5</span>, <span class="number">10</span>),<span class="comment">//随机生成一段中文文本。</span></span><br><span class="line">            <span class="attr">company</span>: Random.csentence(<span class="number">5</span>, <span class="number">10</span>),</span><br><span class="line">            <span class="attr">attention_degree</span>: Random.integer(<span class="number">100</span>, <span class="number">9999</span>),<span class="comment">//返回一个随机的整数。</span></span><br><span class="line">            <span class="attr">photo</span>: Random.image(<span class="string">&#x27;114x83&#x27;</span>, <span class="string">&#x27;#00405d&#x27;</span>, <span class="string">&#x27;#FFF&#x27;</span>, <span class="string">&#x27;Mock.js&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        list.push(listObject);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="attr">data</span>: list</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>在 nuxt.config.js 添加插件：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">plugins: [</span><br><span class="line">  <span class="string">&#x27;@/plugins/mock&#x27;</span></span><br><span class="line">],</span><br></pre></td></tr></table></figure>

<blockquote>
<p>修改 xhr</p>
<p>如果直接使用会报：</p>
<p>request.upload.addEventListener is not a function</p>
<p>错误，这是因为 mock 自己封装了一个基于 XMLHttpRequest 的 MockXMLHttpRequest 对象。</p>
<p>找到 node_modules/mockjs/dist/mock.js 第 8305 行，在这之后添加一行：</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">MockXMLHttpRequest.prototype.upload = createNativeXMLHttpRequest().upload</span><br></pre></td></tr></table></figure>
<img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/2021/10/24/nuxt-note1/20210420200847.png"
                      class=""
                >

<h2 id="第九节：Nuxt的错误页面和个性meta设置"><a href="#第九节：Nuxt的错误页面和个性meta设置" class="headerlink" title="第九节：Nuxt的错误页面和个性meta设置"></a>第九节：Nuxt的错误页面和个性meta设置</h2><blockquote>
<p>当用户输入路由错误的时候，我们需要给他一个明确的指引，所以说在应用程序开发中404页面是必不可少的。Nuxt.js支持直接在默认布局文件夹里建立错误页面。</p>
</blockquote>
<h3 id="1-建立错误页面"><a href="#1-建立错误页面" class="headerlink" title="1.建立错误页面"></a>1.建立错误页面</h3><blockquote>
<p>在根目录下的layouts文件夹下建立一个error.vue文件，它相当于一个显示应用错误的组件。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-if</span>=<span class="string">&quot;error.statusCode==404&quot;</span>&gt;</span>404页面不存在<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-else</span>&gt;</span>500服务器错误<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">nuxt-link</span> <span class="attr">to</span>=<span class="string">&quot;/&quot;</span>&gt;</span>HOME<span class="tag">&lt;/<span class="name">nuxt-link</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">props</span>:[<span class="string">&#x27;error&#x27;</span>],</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码用v-if进行判断错误类型，需要注意的是这个错误是你需要在&lt;script&gt;里进行声明的，如果不声明程序是找不到error.statusCode的。</p>
<p>这里我也用了一个&lt;nuxt-link&gt;的简单写法直接跟上路径就可以了。</p>
</blockquote>
<h3 id="2-个性meta设置"><a href="#2-个性meta设置" class="headerlink" title="2.个性meta设置"></a>2.个性meta设置</h3><blockquote>
<p>页面的Meta对于SEO的设置非常重要，比如你现在要作个新闻页面，那为了搜索引擎对新闻的收录，需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。我们现在要把New-1这个页面设置成个性的meta和title。</p>
<p>1.我们先把pages/news/index.vue页面的链接进行修改一下，传入一个title，目的是为了在新闻具体页面进行接收title，形成文章的标题。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">nuxt-link</span> <span class="attr">:to</span>=<span class="string">&quot;&#123;name:&#x27;news-id&#x27;,params:&#123;id:123,title:&#x27;nuxt.com&#x27;&#125;&#125;&quot;</span>&gt;</span>News-1<span class="tag">&lt;/<span class="name">nuxt-link</span>&gt;</span></span>&lt;/li&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>2.第一步完成后，我们修改/pages/news/_id.vue，让它根据传递值变成独特的meta和title标签。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">h2</span>&gt;</span>News-Content [&#123;&#123;$route.params.id&#125;&#125;]<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/&quot;</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  validate (&#123; params &#125;) &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="comment">// Must be a number</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span> <span class="regexp">/^\d+$/</span>.test(params.id)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">title</span>:<span class="built_in">this</span>.$route.params.title,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="comment">//独立设置head信息</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">head</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="attr">title</span>:<span class="built_in">this</span>.title,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="attr">meta</span>:[</span></span></span><br><span class="line"><span class="javascript"><span class="xml">          &#123;<span class="attr">hid</span>:<span class="string">&#x27;description&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;news&#x27;</span>,<span class="attr">content</span>:<span class="string">&#x27;This is news page&#x27;</span>&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        ]</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意：为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号。</p>
</blockquote>
<h2 id="第十二节：nuxt的跨域解决-拦截器"><a href="#第十二节：nuxt的跨域解决-拦截器" class="headerlink" title="第十二节：nuxt的跨域解决+拦截器"></a>第十二节：nuxt的跨域解决+拦截器</h2><blockquote>
<p>安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块</p>
</blockquote>
<blockquote>
<p>注意：不需要手动注册 @nuxt js/proxy 模块，但是必须要确保它在依赖项中。</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install @nuxtjs/axios @nuxtjs/proxy --save</span><br></pre></td></tr></table></figure>

<blockquote>
<p>在 nuxt.config.js 文件里面添加以下配置：</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">** Nuxt.js modules</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="attr">modules</span>: [</span><br><span class="line">  <span class="string">&#x27;@nuxtjs/axios&#x27;</span></span><br><span class="line">],</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">** axios proxy</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="attr">axios</span>: &#123;</span><br><span class="line">  <span class="attr">proxy</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">prefix</span>: <span class="string">&#x27;/api&#x27;</span>, <span class="comment">// baseURL</span></span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">** proxy</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="attr">proxy</span>: &#123;</span><br><span class="line">  <span class="string">&quot;/api&quot;</span>: <span class="string">&quot;http://localhost:3000&quot;</span> <span class="comment">// 代理地址</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果需要额外配置 axios，可以通过 plugins 来进行配置。在 /plugins 目录下增加 axios.js ，并引进配置文件。 如下：</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="string">&#x27;@/plugins/axios&#x27;</span></span><br><span class="line">  ],</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>定义axios的拦截器，定义请求的各个阶段需要进行的处理</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> (<span class="params">&#123; $axios, redirect &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 基本配置</span></span><br><span class="line">  $axios.defaults.timeout = <span class="number">10000</span></span><br><span class="line">  $axios.defaults.headers = &#123; <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/json;charset=UTF-8&#x27;</span> &#125;</span><br><span class="line">  $axios.defaults.transformRequest = [<span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 将参数对象转成JSON形式</span></span><br><span class="line">    data = <span class="built_in">JSON</span>.stringify(data)</span><br><span class="line">    <span class="keyword">return</span> data</span><br><span class="line">  &#125;]</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 请求拦截器</span></span><br><span class="line">  $axios.interceptors.request.use(</span><br><span class="line">    <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 在发送请求之前做些什么</span></span><br><span class="line">      <span class="keyword">return</span> config</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 处理请求错误</span></span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error)</span><br><span class="line">    &#125;</span><br><span class="line">  )</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 请求回调</span></span><br><span class="line">  $axios.onRequest(<span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;Making request to &#x27;</span> + config.url)</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 响应拦截器</span></span><br><span class="line">  $axios.interceptors.response.use(</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * Determine the request status by custom code</span></span><br><span class="line"><span class="comment">     * Here is just an example</span></span><br><span class="line"><span class="comment">     * You can also judge the status by HTTP Status Code</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> response.data</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;err&#x27;</span> + error) <span class="comment">// for debug</span></span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error)</span><br><span class="line">    &#125;</span><br><span class="line">  )</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 错误回调</span></span><br><span class="line">  $axios.onError(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> code = <span class="built_in">parseInt</span>(error.response &amp;&amp; error.response.status)</span><br><span class="line">    <span class="keyword">if</span> (code === <span class="number">400</span>) &#123;</span><br><span class="line">      redirect(<span class="string">&#x27;/404&#x27;</span>)</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (code === <span class="number">500</span>) &#123;</span><br><span class="line">      redirect(<span class="string">&#x27;/500&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="第十三节：爬坑"><a href="#第十三节：爬坑" class="headerlink" title="第十三节：爬坑"></a>第十三节：爬坑</h2><h3 id="1-NuxtServerError-connect-ECONNREFUSED-127-0-0-1-80"><a href="#1-NuxtServerError-connect-ECONNREFUSED-127-0-0-1-80" class="headerlink" title="1.NuxtServerError connect ECONNREFUSED 127.0.0.1:80"></a>1.NuxtServerError connect ECONNREFUSED 127.0.0.1:80</h3><blockquote>
<p>原因: asyncData方法异步请求数据时，以为/api/${params.id}这个接口的网址是 127.0.0.1:80, 所以将请求发送给了127.0.0.1:80，而我的接口服务器并没有跑在80端口上，所以报错。</p>
</blockquote>
<blockquote>
<p>解决方法:</p>
</blockquote>
<ol>
<li>将node服务器端口改成 127.0.0.1:80</li>
<li>将接口服务器端口改成 127.0.0.1:80</li>
<li>将asyncData方法使用的请求url加上域名+端口，如下所示</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> asyncData (&#123; params &#125;) &#123;</span><br><span class="line">    <span class="keyword">const</span> res = <span class="keyword">await</span> axios.get(<span class="string">`https://127.0.0.1:3000/api/<span class="subst">$&#123;params.id&#125;</span>`</span>)</span><br><span class="line">    <span class="keyword">return</span> &#123; <span class="attr">title</span>: res.data.title &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-Axios-mockjs-request-upload-addEventListener-is-not-a-function-的原因和解决办法"><a href="#2-Axios-mockjs-request-upload-addEventListener-is-not-a-function-的原因和解决办法" class="headerlink" title="2.Axios + mockjs: request.upload.addEventListener is not a function 的原因和解决办法"></a>2.Axios + mockjs: request.upload.addEventListener is not a function 的原因和解决办法</h3><blockquote>
<p>导致这一问题的根本原因是 Mockjs 中, 封装了原生的 XMLHttpRequest 为 MockXMLHttpRequest.<br>解决思路是, 把原生 XMLHttpRequest 的 upload 属性赋给 MockXMLHttpRequest 的原型对象.在 node_modules/mockjs/dist/mock.js 加入以下代码:</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Handel &quot;request.upload.addEventListener is not a function&quot;</span></span><br><span class="line">MockXMLHttpRequest.prototype.upload = createNativeXMLHttpRequest().upload</span><br></pre></td></tr></table></figure>
<img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/2021/10/24/nuxt-note1/20210416153232.png"
                      class=""
                >
        </div>

        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/10/27/work-norm1/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端协作规范</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/10/24/read-note1/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">《蛤蟆先生去看心理医生》读书笔记</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2021</span>&nbsp;-&nbsp;
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Brennan Wu</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.3</a>
        </div>
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E8%8A%82%EF%BC%9Anuxt-js%E7%9B%B8%E5%85%B3%E6%A6%82%E8%BF%B0"><span class="nav-text">第一节：nuxt.js相关概述</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E9%82%A3%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93%E5%88%B0%E5%BA%95%E6%9C%89%E4%BB%80%E4%B9%88%E5%A5%BD%E5%A4%84%E5%91%A2%EF%BC%9F"><span class="nav-text">1.那服务器端渲染到底有什么好处呢？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BB%80%E4%B9%88%E6%98%AFSSR%EF%BC%9F"><span class="nav-text">2.什么是SSR？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E8%8A%82%EF%BC%9ANuxt%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA"><span class="nav-text">第二节：Nuxt环境搭建</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E8%8A%82%EF%BC%9ANuxt%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84"><span class="nav-text">第三节：Nuxt目录结构</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E4%BB%8B%E7%BB%8D"><span class="nav-text">目录结构介绍</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-text">配置文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Nuxt%E8%BF%90%E8%A1%8C%E5%91%BD%E4%BB%A4"><span class="nav-text">Nuxt运行命令</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E5%9B%9B%E8%8A%82%EF%BC%9ANuxt%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE%E9%A1%B9"><span class="nav-text">第四节：Nuxt常用配置项</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E9%85%8D%E7%BD%AEIP%E5%92%8C%E7%AB%AF%E5%8F%A3"><span class="nav-text">1.配置IP和端口</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E9%85%8D%E7%BD%AE%E5%85%A8%E5%B1%80CSS"><span class="nav-text">2.配置全局CSS</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E9%85%8D%E7%BD%AEwebpack%E7%9A%84loader"><span class="nav-text">3.配置webpack的loader</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%BA%94%E8%8A%82%EF%BC%9ANuxt%E7%9A%84%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE%E5%92%8C%E5%8F%82%E6%95%B0%E4%BC%A0%E9%80%92"><span class="nav-text">第五节：Nuxt的路由配置和参数传递</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%9F%BA%E6%9C%AC%E8%B7%AF%E7%94%B1"><span class="nav-text">1.基本路由</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC"><span class="nav-text">2.页面跳转</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1"><span class="nav-text">3.动态路由</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E8%B7%B3%E8%BD%AC%E8%B7%AF%E7%94%B1%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%E5%B9%B6%E4%B8%94%E5%8F%96%E5%80%BC"><span class="nav-text">4.跳转路由传递参数并且取值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-%E9%A1%B9%E7%9B%AE%E9%9C%80%E6%B1%82url%E4%BC%98%E5%8C%96"><span class="nav-text">5.项目需求url优化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E6%A0%A1%E9%AA%8C"><span class="nav-text">6.路由参数校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1"><span class="nav-text">7.嵌套路由</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E5%85%AD%E8%8A%82%EF%BC%9ANuxt%E7%9A%84%E8%B7%AF%E7%94%B1%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C"><span class="nav-text">第六节：Nuxt的路由动画效果</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%85%A8%E5%B1%80%E8%B7%AF%E7%94%B1%E5%8A%A8%E7%94%BB"><span class="nav-text">1.全局路由动画</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%8D%95%E7%8B%AC%E8%AE%BE%E7%BD%AE%E9%A1%B5%E9%9D%A2%E5%8A%A8%E6%95%88"><span class="nav-text">2.单独设置页面动效</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%B8%83%E8%8A%82%EF%BC%9ANuxt%E7%9A%84%E9%BB%98%E8%AE%A4%E6%A8%A1%E7%89%88%E5%92%8C%E9%BB%98%E8%AE%A4%E5%B8%83%E5%B1%80"><span class="nav-text">第七节：Nuxt的默认模版和默认布局</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E9%BB%98%E8%AE%A4%E6%A8%A1%E6%9D%BF"><span class="nav-text">1.默认模板</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E9%BB%98%E8%AE%A4%E5%B8%83%E5%B1%80"><span class="nav-text">2.默认布局</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E5%85%AB%E8%8A%82%EF%BC%9ANuxt%E6%8F%92%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="nav-text">第八节：Nuxt插件的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-iview%E4%BD%BF%E7%94%A8"><span class="nav-text">1.iview使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-mockjs%E4%BD%BF%E7%94%A8"><span class="nav-text">2.mockjs使用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%B9%9D%E8%8A%82%EF%BC%9ANuxt%E7%9A%84%E9%94%99%E8%AF%AF%E9%A1%B5%E9%9D%A2%E5%92%8C%E4%B8%AA%E6%80%A7meta%E8%AE%BE%E7%BD%AE"><span class="nav-text">第九节：Nuxt的错误页面和个性meta设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%BB%BA%E7%AB%8B%E9%94%99%E8%AF%AF%E9%A1%B5%E9%9D%A2"><span class="nav-text">1.建立错误页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%B8%AA%E6%80%A7meta%E8%AE%BE%E7%BD%AE"><span class="nav-text">2.个性meta设置</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E5%8D%81%E4%BA%8C%E8%8A%82%EF%BC%9Anuxt%E7%9A%84%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3-%E6%8B%A6%E6%88%AA%E5%99%A8"><span class="nav-text">第十二节：nuxt的跨域解决+拦截器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E5%8D%81%E4%B8%89%E8%8A%82%EF%BC%9A%E7%88%AC%E5%9D%91"><span class="nav-text">第十三节：爬坑</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-NuxtServerError-connect-ECONNREFUSED-127-0-0-1-80"><span class="nav-text">1.NuxtServerError connect ECONNREFUSED 127.0.0.1:80</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-Axios-mockjs-request-upload-addEventListener-is-not-a-function-%E7%9A%84%E5%8E%9F%E5%9B%A0%E5%92%8C%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95"><span class="nav-text">2.Axios + mockjs: request.upload.addEventListener is not a function 的原因和解决办法</span></a></li></ol></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="Search..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>



    
<script src="/js/local-search.js"></script>




    
<script src="/js/code-copy.js"></script>




    
<script src="/js/lazyload.js"></script>



<div class="post-scripts">
    
        
<script src="/js/left-side-toggle.js"></script>

<script src="/js/libs/anime.min.js"></script>

<script src="/js/toc.js"></script>

    
</div>



</body>
</html>
